<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 管理 - Nova Flow</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">API 管理</h1>
        <button id="createApiKeyBtn" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            创建 API 密钥
        </button>
    </div>
    
    <!-- API 标签页 -->
    <div class="mb-6">
        <div class="border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8">
                <a href="#" class="border-blue-500 text-blue-600 dark:text-blue-400 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">API 密钥</a>
                <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">应用集成</a>
                <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">使用统计</a>
                <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">访问控制</a>
            </nav>
        </div>
    </div>
    
    <!-- API 密钥列表 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden mb-8">
        <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 px-6 py-4">
            <h2 class="text-lg font-semibold">API 密钥</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">管理您的 API 密钥和权限设置。密钥可用于通过 REST API 访问 Nova Flow 平台的功能。</p>
        </div>
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">密钥名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">类型</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">权限</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">创建时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">过期时间</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-blue-100 dark:bg-blue-900 rounded-md">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium">产品开发 API</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">nf_api_prod_23xBa...</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">生产环境</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">完全访问</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">活跃</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-07-15</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">永不过期</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</a>
                        <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">撤销</a>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-purple-100 dark:bg-purple-900 rounded-md">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium">测试环境 API</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">nf_api_test_78Kda...</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">测试环境</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">受限访问</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">活跃</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-08-22</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2024-08-22</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</a>
                        <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">撤销</a>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                </svg>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium">旧版集成 API</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">nf_api_old_19Pxz...</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">生产环境</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">完全访问</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">已撤销</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-04-10</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-09-10</td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">查看</a>
                        <a href="#" class="text-gray-400 cursor-not-allowed">已撤销</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <!-- API 使用文档 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-4">快速集成指南</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">按照以下步骤将 Nova Flow API 集成到您的应用中：</p>
            
            <ol class="list-decimal list-inside space-y-2 text-sm">
                <li>创建一个新的 API 密钥</li>
                <li>设置适当的权限范围</li>
                <li>在您的应用中添加身份验证</li>
                <li>使用API端点访问平台功能</li>
            </ol>
            
            <div class="mt-6">
                <h3 class="text-md font-medium mb-2">示例代码</h3>
                <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md">
                    <pre class="text-xs overflow-x-auto"><code>// 使用 JavaScript
const response = await fetch('https://api.novaflow.ai/v1/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [
      { role: 'system', content: '你是一个助手' },
      { role: 'user', content: '你好，请介绍一下自己' }
    ]
  })
})

const data = await response.json()
console.log(data.response)</code></pre>
                </div>
            </div>
            
            <div class="mt-4">
                <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm">
                    查看完整 API 文档
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold mb-4">API 端点概览</h2>
            <div class="space-y-4">
                <div>
                    <h3 class="text-md font-medium">聊天 API</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">与配置好的聊天机器人进行交互</p>
                    <div class="flex space-x-2">
                        <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">POST</span>
                        <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">/v1/chat</code>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-md font-medium">知识库查询 API</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">搜索知识库中的相关内容</p>
                    <div class="flex space-x-2">
                        <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">POST</span>
                        <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">/v1/knowledge/search</code>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-md font-medium">工作流执行 API</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">触发已配置的工作流</p>
                    <div class="flex space-x-2">
                        <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">POST</span>
                        <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">/v1/workflow/{workflow_id}/run</code>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-md font-medium">文件上传 API</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">上传文件到知识库</p>
                    <div class="flex space-x-2">
                        <span class="px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">POST</span>
                        <code class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">/v1/files/upload</code>
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm">
                    浏览所有 API 端点
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
    
    <!-- API 使用统计 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8">
        <h2 class="text-lg font-semibold mb-4">API 调用统计</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">本月总调用次数</h3>
                <p class="text-2xl font-bold mt-1">8,543</p>
                <span class="text-sm text-green-500">↑ 12% vs 上月</span>
            </div>
            <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">平均响应时间</h3>
                <p class="text-2xl font-bold mt-1">245ms</p>
                <span class="text-sm text-green-500">↓ 8% vs 上月</span>
            </div>
            <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">成功率</h3>
                <p class="text-2xl font-bold mt-1">99.8%</p>
                <span class="text-sm text-green-500">↑ 0.3% vs 上月</span>
            </div>
            <div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">活跃应用数</h3>
                <p class="text-2xl font-bold mt-1">5</p>
                <span class="text-sm text-gray-500">与上月持平</span>
            </div>
        </div>
        
        <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
            <span class="text-gray-500 dark:text-gray-400">统计图表展示区域</span>
        </div>
    </div>
    
    <!-- 创建 API 密钥模态框 -->
    <div id="createApiKeyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">创建新 API 密钥</h2>
                <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <form id="createApiKeyForm">
                <div class="mb-4">
                    <label for="keyName" class="block text-sm font-medium mb-1">密钥名称</label>
                    <input type="text" id="keyName" class="form-input py-1 text-sm w-full" placeholder="例如: 生产环境 API" required>
                </div>
                <div class="mb-4">
                    <label for="keyType" class="block text-sm font-medium mb-1">类型</label>
                    <select id="keyType" class="form-input py-1 text-sm w-full">
                        <option value="production">生产环境</option>
                        <option value="testing">测试环境</option>
                        <option value="development">开发环境</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="keyPermission" class="block text-sm font-medium mb-1">权限范围</label>
                    <select id="keyPermission" class="form-input py-1 text-sm w-full">
                        <option value="full">完全访问</option>
                        <option value="limited">受限访问</option>
                        <option value="readonly">只读访问</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="keyExpiration" class="block text-sm font-medium mb-1">过期时间</label>
                    <select id="keyExpiration" class="form-input py-1 text-sm w-full">
                        <option value="never">永不过期</option>
                        <option value="30days">30 天</option>
                        <option value="90days">90 天</option>
                        <option value="1year">1 年</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" class="mr-2">
                        <span class="text-sm">我了解这个 API 密钥有权访问我的账户资源，我会妥善保管。</span>
                    </label>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
                    <button type="submit" class="btn btn-primary">创建密钥</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 模态框控制
        document.getElementById('createApiKeyBtn').addEventListener('click', function() {
            document.getElementById('createApiKeyModal').classList.remove('hidden');
        });
        
        document.getElementById('closeModalBtn').addEventListener('click', function() {
            document.getElementById('createApiKeyModal').classList.add('hidden');
        });
        
        document.getElementById('cancelBtn').addEventListener('click', function() {
            document.getElementById('createApiKeyModal').classList.add('hidden');
        });
        
        // 表单提交
        document.getElementById('createApiKeyForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('密钥创建功能将在后端集成后实现');
            document.getElementById('createApiKeyModal').classList.add('hidden');
        });
        
        // 处理主页面发送的主题变更消息
        window.addEventListener('message', function(event) {
            if (event.data.type === 'themeChange') {
                if (event.data.darkMode) {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
            }
        });
        
        // 初始化检查暗色模式
        if (window.parent && window.parent.document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.add('dark');
        }
    </script>
</body>
</html> 